<template>
  <div>
    <div class="h-screen w-screen bg-white relative z-50">
      <div class="w-screen sticky top-0">
        <van-search
          v-model="searchValue"
          placeholder="请输入搜索关键词"
          shape="round"
          show-action
          @cancel="cancelClick"
        />
        <van-tabs v-model:active="tabActive" swipeable color="#ff9854">
          <template v-for="(value, key, index) in allCities" :key="key">
            <van-tab :title="value.title" :name="key"></van-tab>
          </template>
        </van-tabs>
      </div>
      <div
        class="w-full h-[calc(100vh-98px)] overflow-y-auto pt-1 overflow-x-hidden"
      >
        <city-group-item-vue
          :current-group="currentGroup"
        ></city-group-item-vue>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useRouterStore } from '@/stores/modules/router.js'
import useCityStore from '@/stores/modules/city'
import { storeToRefs } from 'pinia'
import cityGroupItemVue from './components/city-group-item/index.vue'
import { getCityAll } from '../../services/modules/city'
const store = useRouterStore()
const cityStore = useCityStore()
const router = useRouter()
const searchValue = ref('')
const tabActive = ref('')
const cancelClick = () => {
  store.setRouterType('back')
  router.push('/')
}
cityStore.fetchAllCities()
const { allCities } = storeToRefs(cityStore)
const currentGroup = computed(() => allCities.value[tabActive.value])
</script>
<style lang="scss" scoped></style>
